/* * 空运合单列表 */
<template>
  <div>
    <div style="position: fixed;z-index: 11; top: 10px; left: 70px;">
      <span style="margin-left:20px;"
        >运单号:{{ simpleWaybillQuery.waybillNo }}</span
      >
      <span style="margin-left:20px;"
        >目的国家:{{ countryMap[simpleWaybillQuery.countryId] }}</span
      >
      <span style="margin-left:20px;"
        >入库渠道:{{
          customerChannelMap[simpleWaybillQuery.inStockChannel]
        }}</span
      >
      <span style="margin-left:20px;"
        >件数:
        <el-button type="text" @click="toDetailShippingTraceByWaybillId">{{
          simpleWaybillQuery.customerTotalPackages
        }}</el-button></span
      >
    </div>
    <el-card class="box-card ">
      <el-row>
        <el-col :span="12">
          <el-input
            id="YQNum"
            v-model.trim="searchCondition"
            type="text"
            size="mini"
          />
        </el-col>
        <el-col :span="12">
          <el-button type="primary" size="mini" @click="checkTrack"
            >TRACK</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-card class="margin-top">
      <div v-for="(trackMap, k) in trackData" :key="k">
        <div v-for="(shippingTraces, track) in trackMap" :key="track">
          <span v-if="k == 'top'">头程轨迹 </span>
          <span v-else-if="k == 'trackNoShipping'">
            追踪号：{{ track }}
            <div
              v-if="
                shippingTraces != null &&
                  shippingTraces != '' &&
                  shippingTraces.length > 0
              "
            >
              <div
                v-if="
                  simpleWaybillQuery.status == 135 &&
                    subStatus[shippingTraces[0].subWaybillId] != '' &&
                    subStatus[shippingTraces[0].subWaybillId] != 888
                "
              >
                <button
                  type="primary"
                  @click="addSubTrack(shippingTraces[0].subWaybillId, track)"
                >
                  标记为已完成
                </button>
              </div>
              <div v-if="subStatus[shippingTraces[0].subWaybillId] != ''">
                <strong>状态：</strong
                >{{ trackStatusMap[subStatus[shippingTraces[0].subWaybillId]] }}
              </div>
            </div>
          </span>
          <span v-else>追踪号{{ k }}：{{ track }} </span>
        </div>
      </div>
    </el-card>
    <el-card class="margin-top">
      <div v-for="(trackMap, k) in trackData" :key="k">
        <div v-for="(shippingTraces, track) in trackMap" :key="track">
          <!-- <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in shippingTraces"
              :key="index"
              :timestamp="activity.time"
              placement="top"
            >
              <div class="flex">
                <div>{{ activity.address }}</div>
                <div>{{ activity.trackNo }}</div>
                <div>{{ activity.track }}</div>
                <div>{{ activity.operationName }}</div>
              </div>
            </el-timeline-item>
          </el-timeline> -->
          <el-table
            :data="shippingTraces"
            style="width: 100%"
            :cell-style="setSellStyle"
            :row-class-name="tableRowClassName"
            size="mini"
            :default-sort="{ prop: 'time', order: 'descending' }"
          >
            <el-table-column label="" width="50">
              <template>
                <div class="relative timeline">
                  <div class="timeline-item"></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <ex-table-column prop="time" label="时间" :auto-fit="true">
            </ex-table-column>
            <ex-table-column prop="address" label="地点" :auto-fit="true">
            </ex-table-column>
            <ex-table-column prop="trackNo" label="追踪号" :auto-fit="true">
            </ex-table-column>
            <ex-table-column prop="track" label="轨迹" :auto-fit="true">
            </ex-table-column>
            <ex-table-column
              prop="operationName"
              label="操作人"
              :auto-fit="true"
            >
            </ex-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

export default {
  data() {
    return {
      screenWidth: document.body.clientWidth, // 获取屏幕宽度
      searchCondition: "",
      customerChannelMap: {},
      simpleWaybillQuery: {},
      countryMap: {},
      trackData: {},
      trackStatusMap: {},
      subStatus: {}
    };
  },
  mounted() {
    this.queryDetailShippingTraceByWaybillId();
    this.init();
  },
  methods: {
    init() {
      const s = document.createElement("script");
      s.type = "text/javascript";
      s.src = "https://www.17track.net/externalcall.js";
      document.body.appendChild(s);
    },
    checkTrack() {
      console.log("YQ", window.YQ);
      console.log("YQV5", window.YQV5);
      if (!this.searchCondition) {
        this.$message.error("请输入内容！");
        return;
      }

      YQV5.trackSingleF2({
        YQ_ElementId: "YQNum",
        YQ_Height: 560,
        YQ_Width: this.screenWidth / 2,
        YQ_Lang: "zh-CN",
        YQ_Num: this.searchCondition
      });
    },
    setSellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "border-right: 2px solid #67E083;background-color: #fff;";
      }
      if (columnIndex === 1 && rowIndex === 0) {
        return "border-bottom-left-radius: 40px;border-top-left-radius: 40px;background: #67e083;";
      }
      if (
        (columnIndex === 2 ||
          columnIndex === 3 ||
          columnIndex === 4 ||
          columnIndex === 5) &&
        rowIndex === 0
      ) {
        return "background: #67e083;";
      }
      if (columnIndex === 6 && rowIndex === 0) {
        return "border-bottom-right-radius:20px; border-top-right-radius: 20px;background: #67e083;";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      // if (rowIndex === 0) {
      //   return "green-row";
      // } else if (rowIndex === 3) {
      //   return "success-row";
      // }
      return "";
    },
    toDetailShippingTraceByWaybillId() {
      var url = "#/blank/waybill__waybillTrackInfo__main";
      url = url + "?waybillId=" + this.$route.query.waybillId + "&type=" + 1;
      window.open(url, "_blank");
    },
    addSubTrack(subWaybillId, trackNo) {
      var param = {};
      param["id"] = subWaybillId;
      param["code"] = trackNo;
      ajax("updateSubwaybillTrack", param).then(
        res => {
          if (res.code === 200) {
            window.location.reload(true);
          } else {
            this.$message.error("操作失败!");
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    queryDetailShippingTraceByWaybillId() {
      var param = {};
      param["waybillId"] = this.$route.query.waybillId;
      param["param5"] = this.$route.query.type;
      ajax("queryDetailShippingTraceByWaybillId", param).then(
        res => {
          if (res.code === 200) {
            this.simpleWaybillQuery = res.data["simpleWaybillQuery"];
            this.customerChannelMap = res.data["customerChannelMap"];
            this.countryMap = res.data["countryMap"];
            this.trackData = res.data["data"];
            this.trackStatusMap = res.data["trackStatusMap"];
            this.subStatus = res.data["subStatus"];
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  }
};
</script>

<style>
/* .el-table .green-row {
  background: #67e083;
  border-bottom-left-radius: 12px;
} */
/* .el-table tr:last-child td:first-child {
  border-bottom-left-radius: 20px;
}

.el-table tr:last-child td:last-child {
  border-bottom-right-radius: 20px;
}

.el-table tr:first-child td:first-child {
  border-top-left-radius: 20px;
}

.el-table tr:first-child td:last-child {
  border-top-right-radius: 20px;
} */

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<style lang="scss" scoped>
.timeline {
  &::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    background-color: rgb(103, 224, 131);
  }
  .timeline-item {
    position: relative;
    width: 10px;
    height: 10px;
    right: 0;
    margin-left: 34px;
    background-color: rgb(103, 224, 131);
    border-radius: 50%;
  }
}
</style>
